<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-card>
            <el-descriptions title="岗位信息" :column="3" border>
              <el-descriptions-item label="岗位名称">{{
                postDetail.postName
              }}</el-descriptions-item>
              <el-descriptions-item label="岗位编码">{{
                postDetail.postCode
              }}</el-descriptions-item>
              <el-descriptions-item label="岗位类型">{{
                postDetail.postTypeName
              }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{
                postDetail.createBy
              }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{
                postDetail.createTime
              }}</el-descriptions-item>
              <el-descriptions-item></el-descriptions-item>
              <el-descriptions-item label="适用职级" :span="3">{{
                postDetail.postGrades
              }}</el-descriptions-item>
              <!-- <el-descriptions-item label="岗位说明" :span="3">{{postDetail.postDecript}}</el-descriptions-item> -->
              <!-- <el-descriptions-item label="备注" :span="3">{{postDetail.organizationTypeName}}</el-descriptions-item> -->
            </el-descriptions>
          </el-card>
        </el-row>
        <el-row>
          <el-card class="org-panel">
            <div slot="header" class="org-panel-header">
              <span>岗位编制</span>
              <!-- <el-button type="primary" size="mini">调整</el-button> -->
            </div>
            <el-table :data="postHeadships">
              <el-table-column
                type="selection"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="organizationSysPath"
                label="岗位名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="postName"
                label="岗位名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="postHeadshipCapacity"
                label="预设编制人数"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="postHeadshipReal"
                label="实际人数"
                width="200"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="postHeadshipLack"
                label="空缺人数"
                width="200"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="postHeadshipOver"
                label="超编人数"
                width="200"
                align="center"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="transfer(scope.row)"
                    type="text"
                    size="small"
                    >查看组织</el-button
                  >
                  <el-button type="text" size="small" @click="edit(scope.row)"
                    >移除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- <el-pagination
              layout="prev, pager, next"
              :total="50">
            </el-pagination> -->
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDetail } from "@/api/organization/post/post.js";
import { getPageList } from "@/api/organization/postHeadship/postHeadship.js";
export default {
  name: "PostDetail",
  dicts: [],
  components: {},
  props: {},
  data() {
    return {
      postId: null,
      postDetail: {
        postCode: null,
        postSysCode: null,
        postName: null,
        postTypeId: null,
        postTypeName: null,
        postGrades: null,
        postDescript: null,
        remark: null,
      },
      activeName: "direct",
      postHeadships: [],
    };
  },
  methods: {
    getPreLoad() {
      this.postId = this.$route.query.postId;
      let preMethods = [getDetail({ postId: this.postId })];
      Promise.all(preMethods)
        .then((resArr) => {
          this.postDetail = resArr[0].data;
          if (this.postDetail.postGrades) {
            this.postDetail.postGrades = this.postDetail.postGrades
              .map((item) => item.gradeName)
              .join("/");
          }
          this.getPostHeadships();
        })
        .catch((err) => {
          console.log("查询岗位详情失败，原因：", err);
        });
    },
    getPostHeadships() {
      getPageList({
        postSysCode: this.postDetail.postSysCode,
        current: 1,
        size: 10,
      })
        .then((res) => {
          this.postHeadships = res.data.records;
        })
        .catch((err) => {
          console.log("查询编制详情失败，原因：", err);
        });
    },
    handleView(row) {
      let userId = row.userId;
      this.$message({
        message: "敬请期待",
        type: "warning",
      });
    },
  },
  mounted() {
    this.getPreLoad();
  },
};
</script>
<style scoped>
>>> .org-panel {
  height: 60vh;
}
>>> .org-panel-header {
  display: flex;
  justify-content: space-between;
}
</style>
